export var name = "navbar";

export function render() {
    return `
        <style>
        body{
        position: relative;
        }
            /* 自定义导航栏样式 */
            .navbar {
                padding: 0.5rem 1rem;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            }

            /* 面包屑样式 */
            /* 左侧菜单控制按钮 */
            .menu-control-btn {
                display: flex;
                align-items: center;
                background: rgba(255,255,255,0.1);
                border: none;
                border-radius: 4px;
                padding: 0.4rem 0.8rem;
                margin-right: 1rem;
                transition: all 0.3s;
                color: white;
            }

            .menu-control-btn:hover {
                background: rgba(255,255,255,0.2);
            }

            .menu-control-icon {
                font-size: 1.2rem;
                line-height: 1;
            }

            /* 右侧内容容器 */
            .navbar-right-content {
                display: flex;
                align-items: center;
                margin-left: auto;
            }

            /* 导航项样式 */
            .nav-link {
                display: flex;
                align-items: center;
                padding: 0.5rem 1rem !important;
            }

            .nav-link i {
                margin-right: 0.4rem;
                font-size: 1.1rem;
            }

            /* 右侧操作按钮 */
            .right-action-buttons {
                display: flex;
                align-items: center;
                margin-left: 1rem;
            }

            .action-btn {
                margin: 0 0.3rem;
                display: flex;
                align-items: center;
            }

            .action-btn i {
                font-size: 1.1rem;
            }

            /* 用户下拉菜单 */
            .user-btn {
                display: flex;
                align-items: center;
                color: white !important;
                text-decoration: none !important;
                padding: 0.25rem 0.5rem;
            }

            .user-avatar {
                margin-right: 0.5rem;
                border: 2px solid rgba(255,255,255,0.3);
            }

            .user-name {
                font-size: 0.9rem;
            }

            /* 响应式调整 */
            @media (max-width: 992px) {
                .right-action-buttons .btn span,
                .user-name {
                    display: none;
                }
                
                .action-btn {
                    margin: 0 0.2rem;
                    padding: 0.25rem 0.5rem;
                }
            }
        </style>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        
            <!-- 左侧菜单控制按钮 -->
            <button  id="showMenu" class="menu-control-btn" type="button">

                <span class="menu-control-icon">
                    <i class="bi bi-list"></i>
                </span>
            </button>

            <!-- 右侧功能区域 -->
            <div class="navbar-right-content">
                <!-- 右侧独立按钮 -->
                <div class="right-action-buttons">
                    <button class="btn btn-outline-light btn-sm action-btn">
                        <i class="bi bi-bell"></i>
                        <span class="badge badge-danger badge-pill">3</span>
                    </button>
                    <button class="btn btn-outline-light btn-sm action-btn">
                        <i class="bi bi-gear"></i>
                    </button>
                    <div class="user-dropdown hover-dropdown">
                   
                        <div class="btn btn-link user-btn" type="button" id="userDropdown" data-toggle="dropdown">
                            <img src="" class="rounded-circle user-avatar" alt="User">
                            <span class="user-name">未登录...</span>
                        </div>
                        
                        <div class="dropdown-menu dropdown-menu-right hover-list">
                            <a class="dropdown-item" href="javascript:;">
                                <i class="bi bi-person"></i> 个人信息
                            </a>
                            <a class="dropdown-item logout" href="javascript:;">
                                <i class="bi bi-box-arrow-right"></i> 退出
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    `;
}

export function afterRender() {
    var hoverDropdown = document.querySelector(".hover-dropdown");
    var hoverList = document.querySelector(".hover-list");
    var logout = document.querySelector(".logout");
    var userDropdown = document.querySelector("#userDropdown");

    (function (){//页面加载完成时 执行
        var user = JSON.parse(localStorage.getItem("user-info") || "{}");

        userDropdown.firstElementChild.src = user.avatar;
        userDropdown.lastElementChild.textContent = user.username;
    })();

    hoverDropdown.addEventListener("mouseenter", function (event) {
        hoverList.style.display = "block";
    });

    hoverDropdown.addEventListener("mouseleave", function (event) {
        hoverList.style.display = "none";
    });

    logout.addEventListener("click", function (event) {

        localStorage.removeItem("user-info");

        location.href = "/ourmall-admin/login.html";
    })


}
